<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Upload,
} from '@element-plus/icons-vue'
import { ElTree } from 'element-plus'
import { PAGING, TEMPORARY } from '@/constant'
// ------------------use------------------
// #region
const { $confirm, $message } = useCurrentInstance()
const { vLoading, withLoading } = useDefineLoading()
const [isEditDialog, setIsEditDialog]
  = useState<boolean>(false)
const [isAddDialog, setIsAddDialog]
  = useState<boolean>(false)
const [isEscalationDialog, setIsEscalationDialog]
  = useState<boolean>(false)
const [isCopyEscalationDialog, setIsCopyEscalationDialog]
  = useState<boolean>(false)
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region
const treeData = TEMPORARY.productionProcesses
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const treeRef = ref<InstanceType<typeof ElTree>>()
const filterInputValue = ref<string>('')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region
watch(
  () => filterInputValue.value,
  (value: string) => {
    treeRef.value!.filter(value)
  },
)
// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 20 }).fill(0))
}
async function showAddDialog() {
  setIsAddDialog(true)
}
async function showEscalationDialog() {
  setIsEscalationDialog(true)
}
async function showCopyEscalationDialog() {
  setIsCopyEscalationDialog(true)
}
function showEditDialog() {
  setIsEditDialog(true)
}
async function deleteData() {
  try {
    await $confirm(
      '该操作将永久删除该数据，确定删除？',
      '警告',
      {
        type: 'warning',
      },
    )
    getTableData()
  }
  catch (error) {}
}
async function save() {
  try {
    await $confirm(
      '未勾选上报周期的数据项不会保存!',
      '提示',
      {
        type: 'warning',
      },
    )
    $message.success('数据保存成功！')
    getTableData()
  }
  catch (error) {}
}
function filterNode(value: string, data: any) {
  if (!value)
    return true
  return data.label.includes(value)
}
// #endregion
</script>

<template>
  <div
    class="padding-sm align-center box-border flex gap-sm container"
  >
    <div
      class="height-fill flex-incompressible padding-sm flex-direction container-left box-border flex gap-xs"
    >
      <el-input
        v-model="filterInputValue"
        placeholder="全部"
        clearable
        class="flex-incompressible free"
      />
      <b-scrollbar class="flex-fillRemaining">
        <ElTree
          ref="treeRef"
          highlight-current
          default-expand-all
          :data="treeData"
          :filter-node-method="filterNode"
        />
      </b-scrollbar>
    </div>
    <div
      class="height-fill flex-direction overflow flex-fillRemaining container-right flex gap-sm align-end"
    >
      <div class="flex-incompressible">
        <el-button plain @click="showEscalationDialog">
          选择上报数据项
        </el-button>
        <el-button plain @click="showAddDialog">
          添加上报数据项
        </el-button>
        <el-button plain @click="showCopyEscalationDialog">
          复制上报数据项
        </el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
      <el-table
        v-loading
        :data="tableData"
        class="width-fill flex-fillRemaining"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column fixed label="名称" width="200">
          全厂-二次能源-电力-购进
        </el-table-column>
        <el-table-column label="用途">
          购进
        </el-table-column>
        <el-table-column label="计量单位">
          千瓦时
        </el-table-column>
        <el-table-column label="能源品种或工质">
          电力
        </el-table-column>
        <el-table-column label="采集来源" width="130">
          <el-select
            clearable
            size="small"
            style="width: 100px"
          >
            <el-option label="管理信息系统" value="a" />
            <el-option label="生产监控管理系统" value="b" />
            <el-option label="分布式控制系统" value="c" />
            <el-option label="现场仪表" value="d" />
            <el-option label="手工填报" value="e" />
          </el-select>
        </el-table-column>
        <el-table-column label="采集系统名称" width="130">
          <el-input
            size="small"
            clearable
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column label="年报数据" width="100">
          <el-tooltip content="启用" placement="top">
            <el-button
              type="success"
              :icon="Check"
            />
          </el-tooltip>
          <el-tooltip content="可编辑" placement="top">
            <el-button
              type="success"
              :icon="Edit"
            />
          </el-tooltip>
        </el-table-column>
        <el-table-column label="月报数据" width="100">
          <el-tooltip content="启用" placement="top">
            <el-button
              type="success"
              :icon="Check"
            />
          </el-tooltip>
          <el-tooltip content="可编辑" placement="top">
            <el-button
              type="success"
              :icon="Edit"
            />
          </el-tooltip>
        </el-table-column>
        <el-table-column label="日报数据" width="100">
          <el-tooltip content="启用" placement="top">
            <el-button
              type="success"
              :icon="Check"
            />
          </el-tooltip>
          <el-tooltip content="可编辑" placement="top">
            <el-button
              type="success"
              :icon="Edit"
            />
          </el-tooltip>
        </el-table-column>
        <el-table-column label="实时数据" width="100">
          <el-tooltip content="启用" placement="top">
            <el-button
              type="success"
              :icon="Check"
            />
          </el-tooltip>
          <el-tooltip content="可编辑" placement="top">
            <el-button
              type="success"
              :icon="Edit"
            />
          </el-tooltip>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="140"
        >
          <el-tooltip
            content="自定义上报名称"
            placement="top"
          >
            <el-button
              type="primary"
              :icon="Edit"
              @click="showEditDialog"
            />
          </el-tooltip>
          <el-tooltip
            content="是否启用上报"
            placement="top"
          >
            <el-button
              type="primary"
              :icon="Upload"
            />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              type="danger"
              :icon="Delete"
              @click="deleteData"
            />
          </el-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        :page-sizes="PAGING.PAGE_SIZES"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
        background
        class="flex-incompressible"
      />
    </div>

    <!-- 编辑 -->
    <el-dialog
      v-model="isEditDialog"
      width="600"
      append-to-body
      title="编辑工序单元"
    >
      <el-form
        label-width="100px"
        label-position="right"
        class="flex-direction align-center width-fill flex"
        style="margin-bottom: -30px"
      >
        <el-form-item label="名称" class="width-fill">
          <el-input placeholder="全厂-二次能源-电力-购进" />
        </el-form-item>
        <el-form-item label="自定义名称" class="width-fill">
          <el-switch />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button plain @click="setIsEditDialog(false)">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsEditDialog(false)"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
    <!-- 上报 -->
    <el-dialog
      v-model="isEscalationDialog"
      width="800"
      append-to-body
      title="添加上报数据项"
    >
      <el-input
        clearable
        placeholder="按名称搜索"
        style="margin-top: -15px"
        class="margin-bottom-xs"
      />
      <el-table
        :data="[]"
        height="40vh"
        style="width: 100%; margin-bottom: -10px"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="name" label="计量单位" />
        <el-table-column prop="name" label="用途分类" />
        <el-table-column prop="name" label="编码" />
      </el-table>
      <template #footer>
        <el-button
          plain
          @click="setIsEscalationDialog(false)"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsEscalationDialog(false)"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
    <!-- 复制上报 -->
    <el-dialog
      v-model="isCopyEscalationDialog"
      width="600"
      append-to-body
      title="将当前数据项设置复制到："
    >
      <el-table
        :data="[]"
        height="40vh"
        style="width: 100%; margin: -10px 0"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column prop="name" label="工序单元" />
      </el-table>
      <template #footer>
        <el-button
          plain
          @click="setIsCopyEscalationDialog(false)"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsCopyEscalationDialog(false)"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog
      v-model="isAddDialog"
      width="600"
      append-to-body
      title="添加上报数据项"
    >
      <div
        class="align-center flex justify-between"
        style="margin-top: -20px"
      >
        <p>
          <span>工序：</span>
          00
        </p>
        <p>
          <span>工序单元：</span>
          00
        </p>
        <p>
          <span>编码：</span>
          00-00-00
        </p>
      </div>
      <el-form
        label-width="100px"
        label-position="right"
        class="flex-direction align-center width-fill flex"
        style="margin-bottom: -30px"
      >
        <el-form-item label="设备名称" class="width-fill">
          <el-input placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item
          label="设备类型编码"
          class="width-fill"
        >
          <el-input placeholder="请输入设备类型编码" />
        </el-form-item>
        <el-form-item label="设备编码" class="width-fill">
          <el-input placeholder="请输入设备编码" />
        </el-form-item>
        <el-form-item label="能源大类" class="width-fill">
          <el-select
            placeholder="请选择能源大类"
            class="width-fill"
          >
            <el-option disabled label="请选择" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类分项" class="width-fill">
          <el-select
            placeholder="请选择分类分项"
            class="width-fill"
          >
            <el-option disabled label="请选择" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="用途" class="width-fill">
          <el-select
            placeholder="请选择用途"
            class="width-fill"
          >
            <el-option disabled label="请选择" value="" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button plain @click="setIsAddDialog(false)">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsAddDialog(false)"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.container {
  --container-left-w: 240px;
  &-left {
    width: var(--container-left-w);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    transition: all var(--motion-bezier) 0.3s;
    &:hover {
      box-shadow: 0 8px 32px #0000000d;
    }
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
